flex-direction

The flex-direction property signifies which direction the flex items are displayed in the flex container. There are only four directions that are possible. The items can be displayed left to right, right to left, top to bottom, and, you guessed it, from the bottom to the top.

flex-basis

Flex-basis property defines the size of the flex item along either axis, horizontally if the flex-direction is in a row or vertically if the flex-direction is a column. The auto value looks up the main size of the element and defines the size. Flex basis values can be used in shorthand with the flex property stating 3 values for flex-grow, flex-shrink, and finally, flex basis. The code has three value and can be written in shorthand with the example,flex: auto, 0, 1 respectively.

flex-item

The flex items are the individual content that are placed in a flex container. Flex-items can be manipulated by changing the size, the space-around, the space-between, and more within a flex container. Flex items can be photos, art, text, or any other digital component.

Summary

The Flex Box Module, although one dimensional, helps display flex items in an appealing and proportional organizational layout. The content of a flex container has a format and order that will help ensure that the overall user experience with your web pages is friendly and gets the message accross.